import {createElement, findDOMNode, Component} from 'rax';
import Touchable from 'rax-touchable';

export default class TabBody extends Component {
    constructor(props) {
      super(props);
      this.state = {
        page: props.defaultPage || 0
      };
    }
  
    moveBox(duration, offset = 0) {
  
      const { page } = this.state;
      const box = findDOMNode(this.refs.box); // 获取元素
      const moveX = 750 * page + offset;
      setTimeout(() => {
        Tida.transition(box, {
          transform: `translate(-${Tida.env.isWeex ? moveX : moveX / 2}px, 0)`
        }, {
          timingFunction: 'ease',
          duration: duration
        }, () => {
          // console.log('moveEnd');
        });
      }, 0);
    }
  
    sliderTo(page) {
      this.setState({
        page: page
      });
    }
  
    onTouchStart(e) {
      this.beginX = e.changedTouches[0].screenX;
      this.beginY = e.changedTouches[0].screenY;
      this.lastX = e.changedTouches[0].screenX;
    }
  
    onTouchMove(e) {
      const {lastX} = this;
      const {screenX} = e.changedTouches[0];
      this.moveBox(0, lastX - screenX);
      e.stopPropagation && e.stopPropagation();
    }
  
    onTouchEnd(e) {
      const { children = [], onTabBodyChange = () => {}} = this.props;
      const { beginX, beginY } = this;
      const { screenX, screenY } = e.changedTouches[0];
      const moveX = screenX - beginX;
      const moveY = screenY - beginY;
      if (Math.abs(moveX) > Math.abs(moveY) && Math.abs(moveX) > 200 ) {
        // alert(moveX + '===' + moveY);
        const { page } = this.state;
        if (moveX > 0 && page > 0) {
          this.setState({
            page: page - 1
          });
          onTabBodyChange(page - 1);
        } else if ( moveX < 0 && page < children.length - 1) {
          this.setState({
            page: page + 1
          });
          onTabBodyChange(page + 1);
        }
      }
      setTimeout(() => {
        this.moveBox(500);
      }, 0);
      e.stopPropagation && e.stopPropagation();
    }
  
    componentDidMount() {
      this.moveBox(0);
    }
  
    componentDidUpdate() {
      this.moveBox(500);
    }
  
    render() {
      const { heightList = [], children = [], swipeChange = false } = this.props;
      const { page } = this.state;
      let touchEvents = navigator.platform === 'iOS' ? {
        onTouchStart: this.onTouchStart.bind(this),
        onTouchMove: this.onTouchMove.bind(this),
        onTouchEnd: this.onTouchEnd.bind(this),
      } : {
        onPanstart: this.onTouchStart.bind(this),
        onPanmove: this.onTouchMove.bind(this),
        onPanend: this.onTouchEnd.bind(this),
      };
      if (!swipeChange) touchEvents = {};
      const boxProps = {
        style: {
          width: heightList.length * 750,
          height: heightList[page],
          flexDirection: 'row'
        },
        ref: 'box',
        ...touchEvents,
      };
      return (
        <View {...boxProps}>
          {
            children.map((item, index) => {
              return (
                <View style={{width: 750, height: heightList[index]}}>
                  {item}
                </View>
              );
            })
          }
        </View>
      );
    }
  }
  